<template>
  <div class="historical_record">
    <!-- 列表 -->
    <div class="record_list">
      <div class="search_box dis_flex" v-if="false">
        <searchInput class="search_input" type="text" v-model="value" placeholder="搜索活动名称"></searchInput>
        <div class="dis_flex">
          <span class="filtrate_txt">筛选</span>
          <img src="@/assets/images/evaluate/filtrate_icon.png" alt="" class="filtrate_img" />
        </div>
      </div>
      <div class="item_record" style="margin-top: 20px;" v-for="(item, index) in historyList" :key="index">
        <div class="dis_flex">
          <img :src="item.task_cover" alt="" class="cover_img">
          <div>
            <div class="item_tit">{{ item.task_name }}</div>
            <div class="item_stage">活动当前阶段：{{ getStatus(item.task_status) }}</div>
          </div>
        </div>
        <div class="dividing_line"></div>
        <div class="dis_flex mar_bot_7 mar_top_10">
          <div class="small_label type_label">类型</div>
          <div class="">活动类型：{{ item.task_type_name }}</div>
        </div>
        <div class="dis_flex mar_bot_7 mar_top_10">
          <div class="small_label time_label">时间</div>
          <div>{{ convertTimestampToDateTime(item.task_start_time) }} - {{ convertTimestampToDateTime(item.task_end_time
          ) }}</div>
        </div>

        <div class="dis_flex just_spa_between mar_top_10">
          <div>发布人身份：{{ item.task_user_name }}</div>
          <div>发布人员：{{ item.task_user_role }}</div>
        </div>
        <div class="mar_top_10">我的参与情况：{{ getParticipationStatus(item.status) }}</div>
        <div class="mar_top_10">报名审核是否允许：已允许</div>
        <div class="dis_flex just_spa_between mar_top_10">
          <div>招募人数：{{ item.task_enroll_num }}/{{ item.task_max_participation }}</div>
          <div>前置测评：{{ item.task_is_task == 1 ? '有' : '没有' }}</div>
          <div>参与评论：{{ item.is_comment == 1 ? '参与' : "未参与" }}</div>
        </div>
        <div class="dividing_line"></div>
        <div class="dis_flex just_end">
          <div class="item_btn btn_01" @click="toSignIn(item.id)">{{ item.is_sign == 1 ? '已签到' : "活动签到" }}</div>
          <div class="item_btn btn_01" @click="toApply(item)">
            {{ item.leave_status == 1 ? '已请假' : '申请请假' }}
          </div>
          <div class="item_btn btn_02" @click="jumpPage(`/historyActivityDetails?id=${item.id}`)">
            查看详情
          </div>
        </div>
      </div>
    </div>

    <div class="no_data_txt">-- 无更多历史记录了 --</div>

    <!-- 签到弹框 -->
    <van-popup v-model="showSignInPop" round position="center">
      <div class="pop_box">
        <div class="pop_tit">团体活动签到</div>
        <div class="pop_desc">
          现在是<span>2025-1-7 14:01:28</span>，处于签到时段内，您确定要签到吗？
        </div>
        <div class="pop_bnt dis_flex">
          <div class="confirm_btn">确定</div>
          <div class="cancel_btn">取消</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { convertTimestampToDateTime } from "@/utils/time";
import searchInput from "@/components/searchInput/index.vue";
import { querySignIn } from '@/api/funcation/groupActivity'

export default {
  props: {
    historyList: Array
  },
  data() {
    return {
      showSignInPop: false,
      value: "",

      form: {
        pageSize: 10,
        pageNum: 1,
      }
    };
  },
  computed: {
    getStatus() {
      return (ss) => {
        if (ss == 1) return "未开始";
        if (ss == 2) return "报名阶段";
        if (ss == 3) return "签到阶段";
        if (ss == 4) return "实施阶段";
        if (ss == 5) return "已结束";
      };
    },
    getParticipationStatus() {
      return (ss) => {
        if (ss == 1) return "报名，";
        if (ss == 2) return "签到，";
        if (ss == 3) return "参与，";
        if (ss == 4) return "爽约，";
        if (ss == 5) return "请假】";
      };
    },
  },
  components: { searchInput },
  methods: {
    convertTimestampToDateTime,
    async toSignIn(id) {
      let res = await querySignIn({ id })
      if (res.code == 200) {
        this.$toast.success("签到成功！");
        this.$emit('getSignInInfo')
        this.getGroupActivityHistory()
      }
    },
    //申请页面
    toApply(item) {
      let info = {
        id: item.id,
        isApply: item.leave_status,
        submitPerson: item.task_user_role,
        leaveReason: item.leave_reason
      }
      this.$router.push(`/applyVacate?info=${JSON.stringify(info)}`)
    },
    jumpPage(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style lang="less" scoped>
.dis_flex {
  display: flex;
  align-items: center;
}

.just_spa_between {
  justify-content: space-between;
}

.just_end {
  justify-content: end;
}

.historical_record {
  background-color: #f4f6fa;
}

.mar_bot_7 {
  margin-top: 7px;
}

.mar_top_10 {
  margin-top: 10px;
}

.search_box {
  height: 46.67px;
  line-height: 46.67px;
  padding: 0 16px 0 6.67px;
  background: #ffff;
  margin-top: 10px;
}

.search_input {
  border: 0;
  width: 263.33px;
  height: 33.33px;
  background: #f4f6fa;
  border-radius: 6.67px;
  margin: 0;
}

.filtrate_txt {
  color: #333333;
  margin: 0 7px 0 10px;
}

.filtrate_img {
  width: 12px;
  height: 13.33px;
}

//列表
.record_list {
  color: #666666;
  font-size: 12px;
}

.item_record {
  padding: 12px 10px;
  background: #ffffff;
  border-radius: 6.67px;
}

.cover_img {
  width: 36.67px;
  height: 36.67px;
  border-radius: 50%;
  margin-right: 7.67px;
}

.item_tit {
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16.67px;
  line-height: 16.67px;
  font-weight: bold;
  color: #000000;
}

.item_stage {
  margin-top: 10px;
  font-size: 12px;
  line-height: 12px;
  color: #555555;
}

.dividing_line {
  margin: 13px 0 10px;
  border-bottom: 0.33px solid #333333;
  opacity: 0.2;
}

.small_label {
  width: 33.33px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #ffffff;
  font-size: 10px;
  border-radius: 3.33px;
  margin-right: 6.67px;
}

.type_label {
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #ff9500;
}

.time_label {
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #29cca6;
}

.item_btn {
  width: 80px;
  height: 33.33px;
  line-height: 33px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #999999;
  border-radius: 6.67px;
  color: #555555;
  font-size: 12.67px;
}

.btn_01 {
  margin-right: 6.67px;
}

.btn_02 {
  border: 0;
  color: #ffffff;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #0aa7f4;
}

.no_data_txt {
  font-size: 14px;
  margin: 32px auto;
  text-align: center;
}

//弹窗
::v-deep .van-popup {
  width: 90%;
  border-radius: 10px;
}

.pop_box {
  color: #333333;
  text-align: center;
  height: 200px;
}

.pop_tit {
  font-size: 18px;
  line-height: 18px;
  margin-top: 14.67px;
}

.pop_desc {
  font-size: 16px;
  line-height: 26px;
  margin-top: 38px;
  padding: 0 36px;

  span {
    color: #ff9500;
  }
}

.pop_bnt {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 46.67px;

  div {
    width: 50%;
    height: 46.67px;
    line-height: 46.67px;
  }
}

.confirm_btn {
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
  color: #ffffff;
}

.cancel_btn {
  color: #333333;
  background: #f5f5f5;
}
</style>
